<template>
<div class="sub-nav" >
  <div class="sub-bottom" v-if="mold === 'navBottom'">
    <div>
      <router-link to="#">注册帐号</router-link>
      <router-link to="#">登录豆瓣</router-link>
    </div>
    <div>
      <router-link to="#">使用桌面版</router-link>
      <router-link to="#">使用豆瓣App</router-link>
    </div>
  </div>
  <div class="quick-nav" v-if="mold === 'quickNav'">
    <ul class="home-nav">
      <li>
        <router-link class="fl" to="">影院热映</router-link>
        <router-link class="fr" to="">欧美新碟榜</router-link>
      </li>
      <li>
        <router-link class="fl" to="">注册帐号</router-link>
        <router-link class="fr" to="">登录豆瓣</router-link>
      </li>
    </ul>
  </div>
</div>
</template>
<script>
export default {
  name: 'sub-nav',
  data () {
    return {

    }
  },
  props: {
    mold: {
      type: String,
      default: 'quickNav'
    }
  }
}
</script>
<style lang="scss" scoped>
  .sub-bottom{
    div{
      display: flex;
      padding:1.3rem;
      box-sizing: border-box;
      border-bottom: 1px solid #f3f3f3;
      a{
        flex:1;
        text-align: center;
        font-size: 1.5rem;
        color: #42bd56;

      }
      a:nth-child(odd){
        border-right:0.1rem solid #e5e5e5;
      }
    }
  }
  .home-nav{
    padding:0 1.8rem;
    padding-top:1.8rem;
    li{
      overflow: hidden;
      margin-bottom:0.5rem;
    }
    a{
      width:49%;
      padding:1.5rem;
      box-sizing: border-box;
      font-size:1.5rem;
      text-align: center;
      color:#494949;
      background-color: #f6f6f6;
    }
  }
</style>
